<template>
    <div class="level">
      <h1>医院</h1>
      <div class="content">
        <div class="left">等级:</div>
        <ul class="hospital">
          <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
          <li v-for="level in levelArr" :class="{active:activeFlag==level.value}" :key="level.value" @click="changeLevel(level.value)">{{level.name}}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reqHospitalLevelAndRegion } from "../../../api/home";
  import { onMounted, ref } from "vue";
  import type {
    HospitalLevelAndRegionResponseData,
    HospitalLevelAndRegionArr,
  } from "../../../api/home/type";
  
  let levelArr = ref<HospitalLevelAndRegionArr>([]);
  let activeFlag = ref<string>('');
  
  onMounted(() => {
    getLevel();
  });
  //获取医院等级的数据
  const getLevel = async () => {
    let result: HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion(
      "HosType"
    );
    if (result.code == 200) {
      levelArr.value = result.data;
    }
  };
  
  //点击等级的按钮回调
  const changeLevel = (level:string)=>{
     activeFlag.value = level;
     $emit('getLevel',level);
  }
  
  let $emit = defineEmits(['getLevel']);
  </script>
  
  <script lang="ts">
  export default {
    name: "Level",
  };
  </script>
  
  <style scoped lang="scss">
  .level {
    color: #7f7f7f;
    margin-top: 20px;
    h1 {
      font-weight: 900;
      margin: 10px 0px;
    }
    .content {
      display: flex;
      .left {
        // margin-right: 10px;
        width: 50px;
        font-size: 14px;
      }
      .hospital {
        display: flex;
        li {
          margin-right: 10px;
          &.active {
            color: #4490f1;
          }
        }
        li:hover {
          color: #4490f1;
          cursor: pointer;
        }
      }
    }
  }
  </style>
  